<template>
    <div class="container">
        <div class="demo">
            <div class="demo-title">参数设置</div>
            <div class="demo-params">
                <div class="item">
                    <div class="l">类型</div>
                    <div class="r">
                        <label for="showHeader-false">数字金额</label>
                        <input id="showHeader-false" type="radio" name="showHeader" v-model="type" value="number"/>
                        <label for="showHeader-true">密码</label>
                        <input id="showHeader-true" type="radio" name="showHeader" v-model="type" value="password" checked/>
                    </div>
                </div>
                <template v-if="type === 'number'">
                    <div class="item">
                        <div class="l">最大值</div>
                        <div class="r">
                            <input type="number" v-model="max" placeholder="最大值" />
                        </div>
                    </div>
                    <div class="item">
                        <div class="l">小数点后几位</div>
                        <div class="r">
                            <input type="number" v-model="point" placeholder="小数点后几位" />
                        </div>
                    </div>
                </template>
                <template v-if="type === 'password'">
                    <div class="item">
                        <div class="l">输入长度</div>
                        <div class="r">
                            <input type="number" v-model="length" placeholder="长度" />
                        </div>
                    </div>
                </template>
                <div class="item">
                    <div class="l">z-index</div>
                    <div class="r">
                        <input type="number" v-model="zIndex" placeholder="z-index" />
                    </div>
                </div>
            </div>
            <button @click="open = true">打开</button>
            <div class="demo-title">输入的值：{{value}}</div>
            <div class="demo-title">Props</div>
            <table border="1">
                <thead>
                    <tr>
                        <td>参数</td>
                        <td>说明</td>
                        <td>类型</td>
                        <td>默认值</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>open</td>
                        <td>打开</td>
                        <td>Boolean</td>
                        <td>false</td>
                    </tr>
                    <tr>
                        <td>type</td>
                        <td>键盘类型</td>
                        <td>String</td>
                        <td>number（默认），password</td>
                    </tr>
                    <tr>
                        <td>max</td>
                        <td>最大值，type = number才生效</td>
                        <td>Number/String</td>
                        <td>0（无限大）</td>
                    </tr>
                    <tr>
                        <td>point</td>
                        <td>几位小数点，type = number才生效</td>
                        <td>Number/String</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>length</td>
                        <td>长度，type = password才生效</td>
                        <td>Number/String</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>zIndex</td>
                        <td>zIndex</td>
                        <td>Number/String</td>
                        <td>999</td>
                    </tr>
                </tbody>
            </table>
            <div class="demo-title">Events</div>
            <table border="1">
                <thead>
                    <tr>
                        <td>事件</td>
                        <td>说明</td>
                        <td>回调参数</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>cancel</td>
                        <td>取消按钮返回事件</td>
                        <td>返回输入的值</td>
                    </tr>
                    <tr>
                        <td>confirm</td>
                        <td>确定按钮返回事件</td>
                        <td>返回输入的值</td>
                    </tr>
                    <tr>
                        <td>change</td>
                        <td>值改变就触发</td>
                        <td>返回输入的值</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <BrsNumberKeyboard :type="type" :point="point" :zIndex="zIndex" :max="max" :length="length" :open.sync="open" @change="change" @cancel="cancel" @confirm="confirm"></BrsNumberKeyboard>
    </div>
</template>

<script>
import BrsNumberKeyboard from "@/components/numberKeyboard"
export default {
    name: 'demo-BrsNumberKeyboard',
    components: { BrsNumberKeyboard },
    data(){
        return {
            open: false,
            type: 'number',
            max: 0,
            length: 6,
            point: 2,
            zIndex: 999,
            value: ''
        }
    },
    watch: {
        type(){
            this.open = false
            this.value = ''
        }
    },
    methods: {
        cancel(e){
            this.value = e
            console.log('cancel', e)
        },
        confirm(e){
            this.value = e
            console.log('confirm', e)
        },
        change(e){
            this.value = e
            console.log('change', e)
        },
    }
}
</script>

<style lang="less" scoped>

</style>